<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: flex;
        justify-content: center;
        align-content: center;
    }
    .inner {
        width: 150px;
        height: 150px;
        background-color: #0eee06;
    }
</style>
<body>
<input id="name" value="喵喵喵">
<button id="bth">按钮</button>
<div class="outer">
    <div class="inner"></div>
</div>
<button id="btn">点击</button>

</body>
<script>
    //获取焦点时
    let  name = document.querySelector('#name');
    name.onfocus = function (e) {
        console.log(e);
        console.log(name.value)
    };

    //失去焦点
    name.onblur = function () {
        name.value = '';
    };

    //快速双击
    let bth = document.querySelector('#bth');
    bth.ondblclick = function () {
        alert('乌拉')
    };

    //键盘事件监听
    window.onkeydown = function (e) {
        console.log(e.keyCode);
        if(e.keyCode ===65){
            alert('11')
        }
        if(e.keyCode === 83){
            alert('22')
        }
        if(e.keyCode ===68){
            alert('33')
        }
        if(e.keyCode ===87){
            alert('6')
        }
    }
    let outer = document.querySelector('.outer');
    outer.onmouseover = function (e) {
        console.log(e.target);//哪个元素触发了事件
        console.log(e.currentTarget);//

        console.log(e.target.className+'我来了')
    };
    outer.onmouseout = function (e) {
        console.log(e.target.className+'我走了')
    };
    outer.onmouseenter = function (e) {
        console.log('onmouseenter'+e.target.className+'我来了')
    };
    outer.onmouseleave = function (e) {
        console.log('onmouseleave'+e.target.className+'我来了')
    }
    let btn = document.querySelector('#btn');
    //代码从上到下执行，如果写1两个点击事件，下面一个会覆盖掉上面一个
    // btn.onclick = function () {
    //     alert('傻逼')
    // };
    // btn.onclick = function () {
    //     alert('大傻逼')
    // };



    //addEventListener相同的事件可以绑定多个，添加多少个都会触发
    btn.addEventListener('click',function () {
        alert('傻逼')
    });
    btn.addEventListener('click',function () {
        alert('大傻逼')
    })
</script>
</html>